<template>
  <div>这是首页 - state</div>
  <p>count: {{ count }}</p>
  <p>name: {{ name2 }}</p>
  <p>sex: {{ sex }}</p>
  <p>likes: {{ likes }}</p>
  <p>doubleNum: {{ doubleNum }}</p>
  <HomeChild />

  <ul>
    <li v-for="item in list" :key="item.id">{{ item.nm }}</li>
  </ul>
</template>

<script>
import { mapState } from "vuex";
import HomeChild from "./HomeChild.vue";

export default {
  data() {
    return {
      like: "女人",
      num: 100,
    };
  },
  // 如果组件想要用仓库的数据，不能用data的方式引入，会导致没有响应式
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   sex() {
  //     return this.$store.state.sex;
  //   },
  //   likes() {
  //     return this.$store.state.likes;
  //   },
  // },

  // mapState是一个辅助函数，简化多个state的引入
  // 可以写成数组的形式
  // computed: mapState(["count", "name", "sex", "likes"]),

  // 还可以将mapState写成对象
  // 如果mapState要和组件自身的computed一起用，需要使用展开运算符进行合并
  computed: {
    ...mapState({
      count: (state) => state.a.count,
      name2: (state) => state.a.name, // 可以解决命名冲突，取别名
      sex: (state) => (state.a.sex === 1 ? "男" : "女"), // 是可以将拿到的仓库数据做转化
      likes: function (state) {
        return [...state.a.likes, this.like];
      }, // 如果转换的时候需要用到this，那么只能使用普通函数，箭头函数会导致this指向出问题
      list: (state) => state.b.list,
    }),
    doubleNum() {
      return this.num * 2;
    },
  },
  components: {
    HomeChild,
  },
};
</script>
